<!DOCTYPE html>
<html lang="en">

	<head>

		<meta charset="utf-8" />

		<title></title>

		<!-- IE -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- 设置 viewport -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 兼容国产浏览器的高速模式 -->
		<meta name="renderer" content="webkit">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

		<!-- BEGIN 全局样式 -->
		<link rel="stylesheet" type="text/css" href="../../css/reset.css" />
		<link href="../../lib/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />

		<link rel="stylesheet" type="text/css" href="../../lib/bootstrapvalidator/dist/css/bootstrapValidator.css" />
		<!-- END 全局样式 -->
		<style type="text/css">
			body,html{
				height: 800px;
				overflow: auto;
			}
			.permissInput{
				/*display: none;*/
			}
			dt>label{
				color: blue;
			}
		</style>
	</head>

	<!-- END HEAD -->

	<!-- BEGIN BODY -->

	<body class="">
		<div class="container-fluid mt-15">
			<form class="form " id="form">
				<div class="form-group">
					<label for="name">角色名称</label>
					<input type="text" class="form-control" id="name" placeholder="请输入角色名称" name="name">
				</div>
				
				<div class="form-group">
					<label for="memo">备注</label>
					<input type="text" class="form-control" id="memo" placeholder="请输入备注" name="memo">
				</div>
				
				<div class="form-group">
					<label for="" class=""> 权限列表：</label>
					<div class="">
						<div class="perListBox">
							<!--分类的权限列表模块sss-->
							<div id="permissionListBox">
								<dl class="permission-list" style="border: 1px solid #ddd;">
									<dt style="background: #ddd;padding: 5px;">
										<label>
											<!--<input type="checkbox" value="" name="" id="allPermiss" style="margin: 0;">-->
											全部权限
										</label>
									</dt>
									
								</dl>
							</div>
							<!--分类的权限列表模块eee-->
						</div>
					</div>
				</div>
				
				<div>
					<button type="button" class="btn btn-success btn-save">
					  	<span class="glyphicon glyphicon-floppy-saved"></span>
					  	保存
				 	 </button>
					<button type="reset" class="btn btn-warning btn-reset">
			  			<span class="glyphicon glyphicon-record"></span>
			  			取消
			  		</button>
				</div>

			</form>
			
			
		</div>

		<!--核心脚本sss-->
		<script src="../../lib/jquery/1.9.1/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../lib/layer/2.4/layer.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../lib/laypage/1.2/laypage.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../lib/bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

		<script src="../../js/common/jsrsasign-all-min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/common/crypto-js.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/common/jquery.myPlugIn_v1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/common/localstorage-ie.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../lib/bootstrapvalidator/dist/js/bootstrapValidator.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../lib/underscore/underscore.js" type="text/javascript" charset="utf-8"></script>
		
		<!--公共脚本-->
		<script src="../../js/common/common.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="queryPermissions.js" type="text/javascript" charset="utf-8"></script>
		<!--[if lt IE 9]>
		<script src="../../js/excanvas.min.js"></script>
		<script src="../../js/respond.min.js"></script>  
		<![endif]-->
		<!--核心脚本eee-->
		
		<script type="text/javascript">
			$(document).ready(function() {
				//获取权限列表
				fnAjax.method_4(
					url_join("access/list"), {},
					"post",
					function(data) {
						console.log(data);
						//获取并渲染权限列表
						$.getPermiss(".permission-list",data.data);
						
						if(localStorage.getItem("optionType") == "edit") {
							//获取单例角色信息
							fnAjax.method_4(
								url_join("role/show"),
								{rid:localStorage.getItem("nId")},
								"post",
								function(data){
									console.log(data);
									$("#name").val(data.data.role.name);
									$("#memo").val(data.data.role.memo);
									//回显数据权限
									$.backShowData(data.data.access);
								}
							);
						}
					}
				);
				
				
				
				
				
				//初始化表单验证
				$('#form')
					.bootstrapValidator({
						message: '这个值是无效的',
						feedbackIcons: {
							valid: 'glyphicon glyphicon-ok',
							invalid: 'glyphicon glyphicon-remove',
							validating: 'glyphicon glyphicon-refresh'
						},
						fields: {
							name: {								
								validators: {
									notEmpty: {
										message: '角色名称是必需的，不能是空的'
									},
									stringLength: {
										min: 2,
										max: 20,
										message: '角色名称长度必须大于2，小于20个字符'
									},									
								}
							},
							memo: {
								validators: {									
									stringLength: {
										min: 0,
										max: 20,
										message: '备注最大20个字符'
									},									
								}
							},
							
				            
						}
					})
					.on('success.form.bv', function(e) {
						// 阻止表单提交
						e.preventDefault();
						if(localStorage.getItem("optionType") == "edit"){
							$('#form').append($('<input type="hidden" value="' + localStorage.getItem("nId") + '" name="rid"/>'));
						}
						// 获得表单实例
						var $form = $(e.target);
						var oData = $.serializeToObj($form.serialize());
						oData.access  = $.getAccessId();
						
						
						layer.confirm("确定该角色拥有已经勾选的权限？角色一旦绑定该权限也就拥有对应的功能咯！",function(){
							//编辑和添加
							fnAjax.method_4(
								(localStorage.getItem("optionType") == "edit" ? url_join("role/update") : url_join("role/create")),
								oData,								
								"post",
								function(data) {
									console.log(data);
									layer.msg("操作成功", {
										time: 1500
									}, function() {
										parent.location.reload();
									});
								}
							);
						})

					});
				// 手动验证表单
				$('.btn-save').click(function() {
					$('#form').bootstrapValidator('validate');
				});

			});
			
		
		</script>
	</body>

</html>